<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        figure:nth-of-type(1){
            width: 430px;
            height: 350px;
            overflow: hidden;
            position: relative;
        }
        figure img{
            transition: all .6s;
        }
        figure figcaption{
            color: #000;
            width: 100%;
            height: 50px;
            position: absolute;
            z-index: 3;
            bottom: -50px;
            overflow: hidden;
            background: #fff;
            transition: all .6s;
        }
        figcaption p{
            width: 100%;
            height: 100%;
        }
        figure:hover img{
            opacity: 0.7;
            transform: translateX(-50px);
        }
        figure:hover figcaption{
            opacity: 0.7;
            transform: translateY(-50px);
        }
        .pic8{
            width: 430px;
            height: 350px;
            overflow: hidden;
            transition: all .6s;
            position: relative;
        }
        .pic8 img{
            transition: all .6s;
        }
        .pic8:hover img{
            transform: scale(1.2);
        }
        .pic8 .xian1{
            width: 220px; 
            height: 200px;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            position: absolute;
            top:60px; 
            left: 50px;
            transition: all .6s;
            transform: scaleX(0);
        }
         .pic8 .xian2{
            width: 200px; 
            height: 220px;
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
            position: absolute;
            top:50px; 
            left: 60px;
             transition: all .6s;
             transform: scaleY(0);
        }
        .pic8:hover .xian1{
            transform: scaleX(1);
        }
        .pic8:hover .xian2{
            transform: scaleY(1);
        }
    </style>
<body>
    <div id='wrap'>
        <figure>
            <img src="img/pic3.jpg" alt="">
            <figcaption>
                <p>
                    css3动画很强大<br>
                    真的很强大
                </p>
            </figcaption>
        </figure>
        <div class="pic8">
            <img src="img/pic8.jpg" alt="">
            <div class="xian1"></div>
            <div class="xian2"></div>
            <p>
                scale实现线条转换
            </p>
        </div>
    </div>
</body>
</html>